<template>
  <div>
    <base-modal
      :title="$t('member.components.title45')"
      :show.sync="visible"
      width="524px"
      :close-on-click-modal="false"
    >
      <div class="goods-added-dialog">
        <el-form
          ref="editFormRef"
          :model="editForm"
          :rules="rules"
          label-position="top"
          class="edit-form"
        >
          <el-form-item :label="$t('member.fields.title8')" prop="balance">
            <div><el-input type="number" v-model="editForm.balance" :min="0" :max="1000000" :placeholder="$t('common.base.tip.defaultPlaceholder')"></el-input></div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{$t('common.base.close')}}</el-button>
        <el-button type="primary" @click="handleConfirm">{{$t('common.base.save')}}</el-button>
      </div>
    </base-modal>
  </div>
</template>

<script>
import { memberRecharge } from '@src/api/Member'
import MathUtil from '@src/util/math';
export default {
  name: 'recharge-balance-dialog',
  data() {
    let checkBalance = (rule, value, callback) => {
      let count = MathUtil.decimalNumber(value);
      if (!value) {
        callback(new Error(this.$t('member.components.title11')));
      } else if (value >= 1000000 || value < 0) {
        callback(new Error(this.$t('member.components.title52')));
      } else if (count > 2) {
        callback(new Error(this.$t('common.currency.exchangeRateLimit4')));
      } else {
        callback();
      }
    };
    return {
      visible: false,
      editForm: {
        balance: '',
      },
      rules: {
        balance: [
          { required: true, validator: checkBalance, trigger: 'change' },
        ],
      }
    };
  },
  methods: {
    open(row) {
      this.membershipId = row.id
      this.visible = true
    },
    handleConfirm() {
      this.$refs.editFormRef.validate(async(valid) => {
        if (valid) {
          const confirm = await this.$platform.confirm(this.$t('member.components.title63'));
          if (!confirm) return;

          // 充值余额接口调用，事件抛出更新会员列表
          let params = {
            membershipId: this.membershipId,
            propertyType: 1,
            num: this.editForm.balance,
          }
          const { code, result } = await memberRecharge(params);
          if (code !== 0) return this.$message.error(this.$t('member.components.title12'));
          this.$message.success(this.$t('member.components.title13'));
          this.$refs.editFormRef?.resetFields()
          this.$emit('updateList')
          this.visible = false
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-title {
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}
.dialog-tip {
  font-size: 14px;
  font-weight: 400;
  color: #595959;
  margin-top: 14px;
  @include text-ellipsis();
}

.goods-added-dialog {
  padding: 20px;
}
</style>
